import React, { Component } from "react";
import "./index.css";
export default class Item extends Component {
  //标识鼠标移入移出维护一个状态
  state = { mouse: false };

  handleMouse = (flag) => {
    return () => {
      this.setState({ mouse: flag });
    };
  };
  //勾选复选框的回调
  checkChange = (id) => {
    return (e) => {
      console.log(id, e.target.checked);
      this.props.updateTodo(id, e.target.checked);
    };
  };

  //删除todo的回调
  handleDel = (id) => {
    if (window.confirm("确定删除吗?")) {
      this.props.deleteTodo(id);
    }
  };

  render() {
    const { id, name, done } = this.props;
    const { mouse } = this.state;
    return (
      <div>
        <li
          style={{
            backgroundColor: mouse ? "skyblue" : "white",
            cursor: "pointer",
          }}
          onMouseEnter={this.handleMouse(true)}
          onMouseLeave={this.handleMouse(false)}
        >
          <label>
            {/* 这里要写defaultChecked(第一次有用)
          
            ，写成checked会报错不能修改(写checked要写onChange事件)
            */}
            <input
              type="checkbox"
              checked={done}
              onChange={this.checkChange(id)}
            />
            <span>{name}</span>
          </label>
          <button
            onClick={() => this.handleDel(id)}
            className="btn btn-danger"
            style={{ display: mouse ? "block" : "none" }}
          >
            删除
          </button>
        </li>
      </div>
    );
  }
}
